{% from "shuup/admin/macros/multilanguage.jinja" import language_dependent_content_tabs, render_monolingual_fields %}

{% macro render_form(form, form_prefix, idx) %}
{% set full_prefix = form_prefix + idx|string if idx == "__prefix__" else form_prefix %}
<div class="panel panel-default row panel-slide panel-behavior-component panel-{{ full_prefix }}" id="panel-{{ full_prefix }}">
    <div class="panel-heading col-12" role="tab" id="heading-{{ full_prefix }}">
        <a class="panel-title d-flex p-3 flex-column" role="button" data-toggle="collapse" href="#collapse{{ full_prefix }}" aria-expanded="false" aria-controls="collapse{{ full_prefix }}">
            <h5 class="slide-title">{{ form.instance.name }}</h5>
            <p class="mb-0">{{ form.instance.description }}</p>
        </a>
    </div>
    <div id="collapse{{ full_prefix }}" class="component-form col-12 panel-body panel-collapse collapse{% if  idx == "__prefix__" or form.errors %} in{% endif %}" role="tabpanel">
        {% if form.translated_field_names %}
            {{ language_dependent_content_tabs(form, tab_id_prefix=full_prefix) }}
            <div class="form-divider"></div>
        {% else %}
            <div class="language-tabs"></div>
        {% endif %}
        {{ render_monolingual_fields(form) }}
    </div>
</div>
{% endmacro %}

{{ formset.management_form }}
<div class="d-none" id="{{ form_prefix }}-placeholder">
    {{ render_form(formset.empty_form, form_prefix, "__prefix__") }}
</div>
{% for f in formset %}
    {% set form_prefix = form_prefix + "-" + (loop.index - 1)|string %}
    {{ render_form(f, form_prefix, loop.index) }}
{% endfor %}
